/*
 * @Author: sunzhijun 
 * @Date: 2019-10-31 16:05:48 
 * @Last Modified by: sunzhijun
 * @Last Modified time: 2020-03-11 17:07:38
 */

import React from 'react';
import { base } from 'nc-lightapp-front';
import {render, connect} from 'src/hrpub/common/frame';
import NCBackBtn from 'src/hrpub/common/components/hr-back';
const { NCSelect, NCDatePicker } = base;
const NCOption = NCSelect.NCOption;
const { NCRangePicker } = NCDatePicker;
import './index.less';

const HeaderContent = render({
    
})(({props, state}) => {
    const { main, action } = props;
    let { isCardForm, orderStatus, timeRange, timerRangeValue, pk_org, language } = main;
    let orderStatusList = action.headerAct.getOrderStatusList();
    let timeRangeList = action.headerAct.getTimeRangeList();
    return (
        <React.Fragment>
            <If condition={!isCardForm && !!pk_org}>
                <span className="top-applyStatus">
                    <NCSelect
                        multiple={true}
                        showClear={false}
                        style={{
                            width: '160px'
                        }}
                        placeholder={language['hrcm-000052']}
                        onChange={action.headerAct.changeOrderStatus}
                        value={orderStatus}
                    >
                        {orderStatusList.map((item) => {
                            return (
                                <NCOption
                                    key={item.key}
                                >
                                    {item.label}
                                </NCOption>
                            );
                        })}
                    </NCSelect>
                </span>
                <span className="top-timeRange">
                    <NCSelect
                        style={{
                            width: '140px'
                        }}
                        showClear={false}
                        onChange={action.headerAct.changeOrderRange}
                        value={timeRange}
                    >
                        {Object.keys(timeRangeList).map((key) => {
                            return (
                                <NCOption
                                    key={key}
                                >
                                    {timeRangeList[key]}
                                </NCOption>
                            );
                        })}

                    </NCSelect>
                </span>
                {timeRange === 'custom' ? <span
                        className="top-timeRange"
                        style={{
                            width: '213px'
                        }}
                    >
                        <NCRangePicker
                            placeholder={language['hrcm-000017']}
                            onChange={action.headerAct.changeOrderTime}
                            value={timerRangeValue}
                        />
                    </span> : null}
                </If>
            <If condition={main.isCardForm}>
                <NCBackBtn onClick={action.headerAct.back} className="back-btn"/>
            </If>
        </React.Fragment>
    );
});
export default HeaderContent;